<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<script src="./jquery-1.12.4.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

<style>
    .progress {
  height: 30px;
  margin-bottom: 20px;
}

.progress-bar {
  line-height: 30px;
  font-size: 16px;
  transition: none; /* 禁用CSS过渡，使用JS控制更精确 */
}
</style>
</head>
<body>
    
    <div class="container">
        <div class="row">
            <h2>hello</h2>
            <!-- 触发按钮 -->
            <button type="button" class="btn btn-primary btn-lg"   onclick="showIt()">
                打开弹框
              </button>
        </div>
    </div>


    
<!-- 弹框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content"> 
        <div class="modal-body">
                <div class="progress">
                  <div id="progress-bar" class="progress-bar progress-bar-striped active" 
                       role="progressbar" aria-valuenow="0" 
                       aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                    <span id="progress-text">0%</span>
                  </div>
                </div>
                <div class="text-center" style="margin-top: 20px;">
                  <!-- <button id="start-btn" class="btn btn-primary">开始</button> -->
                  <button id="reset-btn" class="btn btn-default">重置</button>
                </div>
                <div id="time-display" class="text-center" style="margin-top: 10px; font-size: 18px;">
                  剩余时间: 60秒
                </div>
            
        </div>
      
      </div>
    </div>
  </div>


    
</body>

<script>

var progressBar = $('#progress-bar');
  var progressText = $('#progress-text');
  var timeDisplay = $('#time-display');
  var startBtn = $('#start-btn');
  var resetBtn = $('#reset-btn');
  
  var interval;
  var timeLeft = 60; // 总时间60秒
  var progress = 0;  // 初始进度0%
  

  // 重置进度条
  resetBtn.click(function() {
    clearInterval(interval);
    interval = null;
    timeLeft = 60;
    progress = 0;
    progressBar.css('width', '0%');
    progressBar.attr('aria-valuenow', 0);
    progressText.text('0%');
    timeDisplay.text('剩余时间: 60秒');
    progressBar.addClass('active'); // 恢复动画效果
    startBtn.prop('disabled', false);
  });

function showIt(){
    $('#myModal').modal('show');



      // 开始动画

    // 如果已经在运行则返回
  
    
    // 每秒更新一次
    interval = setInterval(function() {
      timeLeft--;
      
      // 计算进度 (从0到100)
      progress = 100 - (timeLeft / 60 * 100);
      
      // 更新进度条
      progressBar.css('width', progress + '%');
      progressBar.attr('aria-valuenow', progress);
      progressText.text(Math.round(progress) + '%');
      
      // 更新剩余时间显示
      timeDisplay.text('剩余时间: ' + timeLeft + '秒');
      
      // 完成时清除定时器
      if (timeLeft <= 0) {
        clearInterval(interval);
        interval = null;
        progressBar.removeClass('active'); // 移除动画效果
        startBtn.prop('disabled', false);
      }
    }, 1000); // 1000毫秒 = 1秒
  
  
}
   

</script>

</script>
</html>